<template>
	<view class="box">

		<!-- 	<view class="" @click="getAuthCode()">
			点我
		</view> -->
		<view class="title">
			<text style="font-size: 48rpx;">Hi~您好！</text>
			<text style="font-size: 24rpx;">请选择您需要咨询的问题</text>
		</view>

		<view class="card">
			<view class="row1">
				<view class="" style="font-size: 36rpx;font-weight: 700;">
					帮助中心
				</view>
				<view class="u-flex u-row-between u-col-center" style="font-size: 24rpx;color: #999999;">
					<!-- 		<text>查看全部</text>
					<text class="u-iconfont uicon-arrow-right" style="color: #bfbfbf;"></text> -->
				</view>
			</view>

			<view class="row2" v-for="(item,index) in cardlist" :key="index"
				:style="{borderBottom:index == 3?'none':'2rpx solid gainsboro'}" @click="goPage(index)">
				<view class="u-flex" style="font-size: 28rpx;font-weight: 500;color: #3D3D3D;">
					<image :src="$BASE_URL + item.pic" mode="aspectFill"
						style="height: 40rpx;width: 40rpx;margin-right: 20rpx;"></image>
					<text>{{item.title}}</text>
				</view>
				<view class="u-flex u-row-between u-col-center" style="font-size: 24rpx;color: #999999;">
					<text class="u-iconfont uicon-arrow-right" style="color: #bfbfbf;"></text>
				</view>
			</view>
		</view>
		<!-- <contact-button tnt-inst-id="4rs_kzXF" scene="SCE01234650"
		size='40'
		icon='https://zuji.jiusuding.cn/uploads/20230106/0fece71e23025e0dd9d8d81b1c7b81a8.png'
		style='width: 200rpx !important; background-color: aquamarine;'
		 /> -->

		<view class="callPhone" @click="showservice = true">
			平台在线客服
		</view>
		<view class="" style="text-align: center;font-size: 24rpx;color: #999999;">
			服务时间：周一至周日9:00~21:30
		</view>

		<!-- <view class="" @click="getCounp()">
			领取优惠券
		</view> -->

		<u-popup v-model="showservice" mode="center" border-radius="40">
			<view class="service-box">
				<view class="" style="display: flex;justify-content: space-between;">
					<view class="service-box-item">
						<contact-button tnt-inst-id="4rs_kzXF" scene="SCE01234650" size='60'
							:icon='$BASE_URL + serviceIcon[1]'
							style='width: 200rpx !important; background-color: aquamarine;' />
						<view class="">
							在线客服
						</view>
					</view>

					<view class="service-box-item" @click="call(2)">
						<image :src="$BASE_URL + serviceIcon[2]" mode="aspectFill"></image>
						<view class="">
							平台热线
						</view>
					</view>

				</view>
				<view class="" style="font-size: 22rpx;text-align: center;margin-top: 40rpx;">
					服务时间：周一至周日 9:00~21~30
				</view>

				<!-- <view class="" >
					测试
				</view> -->
			</view>
		</u-popup>
		<!-- <button @click="demo">nihao</button> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showservice: false,
				picList: [],
				cardlist: [],
				serviceIcon: []
			}
		},
		mounted() {
			this.getpic()
			// this.getC()
		},
		methods: {
	
			gggg() {

				this.$http('cart.index').then(res => {})
			},
			getC() {
				this.$http('coupons.list', {
					type: 0
				}).then(res => {
					console.log(res, 'counplist');
				})
			},
			getCounp() {
				this.$http('coupons.get', ).then(res => {
					console.log(res);
				})
			},
			call() {
				uni.makePhoneCall({
					phoneNumber: uni.getStorageSync('kefu') || '4006193669' //仅为示例
				});
			},

			getAuthCode() {

				this.$http('order.freezed', {
					order_sn: '202305310934352890002000'
				}).then(res => {
					console.log(res);
					if (res.code == 1) {

						my.tradePay({
							// 调用资金冻结接口（alipay.fund.auth.order.app.freeze），获取支付宝预授权参数
							orderStr: res.data.result,
							success: (res) => {
								my.alert({
									content: JSON.stringify(res),
								});
							},
							fail: (res) => {
								my.alert({
									content: JSON.stringify(res),
								});
							}
						});

					}
				})
				// .js


			},

			getpic() {
				this.$http('common.getPic', {}).then(res => {
					if (res.code === 1) {
						console.log(res);
						this.picList = res.data.result.kufuicon
						this.serviceIcon = res.data.result.serviceIcon

						uni.setStorageSync('kefu', res.data.result.kefuPhone)
						let data = []
						let name = ['订单问题', '支付问题', '发货问题', '售后问题']
						this.picList.forEach((item) => {
							data.push({
								title: '',
								pic: item
							})
						})

						name.forEach((item, index) => {
							data[index].title = item
						})
						// console.log(data,'data');
						this.cardlist = data
					}
				});
			},
			goPage(index) {

				uni.navigateTo({
					url: 'pages/index/help?index=' + index,

				})


			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		min-height: 100vh;
		background: url('https://zu.qsnyjy.cn/uploads/20221210/68d146d912863025f7718c4536445a83.png') no-repeat;
		background-size: contain;
		padding: 0 26rpx;
		box-sizing: border-box;

		.title {
			padding-top: 60rpx;
			padding-bottom: 30rpx;
			color: #fff;
		}

		.card {
			width: 100%;
			// height: 300rpx;
			background-color: #fff;
			border-radius: 16rpx;
			box-sizing: border-box;
			padding: 30rpx 32rpx;

			.row1 {

				display: flex;
				justify-content: space-between;
				height: 80rpx;
				line-height: 80rpx;
				border-bottom: 2rpx solid gainsboro;
			}

			.row2 {

				display: flex;
				justify-content: space-between;
				height: 100rpx;
				line-height: 100rpx;
				border-bottom: 2rpx solid gainsboro;
			}

			.row2:active {
				background-color: gainsboro;
				border-radius: 10rpx;
			}
		}

		// contact-button {
		// 	width: 200rpx !important;
		// 	background-color: #df3e3e !important;
		// }

		.callPhone {
			background-color: #ff4747;
			width: 100%;
			height: 88rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			font-size: 32rpx;
			border-radius: 44rpx;
			margin: 30rpx auto;

		}

		.dddd {

			position: absolute;
			z-index: 100;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			opacity: 0;
		}


		.callPhone:active {
			background-color: #df3e3e;
		}



		.service-box {
			width: 512rpx;
			border-radius: 40rpx;
			opacity: 1;
			background: #FFFFFF;
			padding: 60rpx 44rpx 44rpx 36rpx;
			box-sizing: border-box;

			.service-box-item {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex-direction: column;

				image {
					width: 120rpx;
					height: 120rpx;
					margin-bottom: 10rpx;
				}

				font-size: 24rpx;
			}

		}
	}
</style>
